<template>
  <div class="wrapper">
    <top-bar class="top-bar" :shadow="true">
      <template v-slot:title>
        {{ $t("Edit your profile") }}
      </template>
    </top-bar>
    <div class="container">
      <div>
        <div class="avatar" @click="setAvatar">
          <yowin-img :src="avatarState.avatar"></yowin-img>
          <div class="camera"></div>
        </div>
        <div class="info">
          <div class="info-item">
            <div class="content">
              <div class="title">{{ $t("Nickname") }}</div>
              <div class="side-right" @click="clickNickname">
                <input
                  v-model="nickNameInput"
                  type="text"
                  :placeholder="$t('Please enter')"
                  maxlength="20"
                />
                <span class="arrow"></span>
              </div>
            </div>
          </div>
          <div class="info-item">
            <div class="content">
              <div class="title">{{ $t("Phone Number") }}</div>
              <div class="side-right" @click="bindMobile">
                <div v-if="!vueState.pageInfo.mobile" class="login">
                  {{ $t("Login") }}
                </div>
                <div v-if="!vueState.pageInfo.mobile" class="arrow"></div>
                <div v-if="vueState.pageInfo.mobile" class="number">
                  {{ vueState.pageInfo.mobile }}
                </div>
              </div>
            </div>
          </div>
          <div class="info-item">
            <div class="title">{{ $t("Gender") }}</div>
            <div class="select">
              <div
                v-for="(item, index) in radioGroup"
                :key="index"
                :class="[
                  'select-item',
                  `${item}`,
                  { active: index + 1 === genderChecked },
                ]"
                @click="clickGender(index + 1)"
              >
                <div class="gender">{{ $t(item) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="['button', { unactive: unactive }]" @click="clickButton">
        {{ $t("Update") }}
      </div>
    </div>
  </div>
</template>
<script>
import {
  reactive,
  toRefs,
  onUnmounted,
  inject,
  computed,
  watch,
  onMounted,
  getCurrentInstance,
} from "vue";
import { debounce } from "@@/utils/common.js";
import { UserApi } from "@@/api/api.js";
import { Toast } from "vant";
import errorImg from "../../../assets/images/default_avator.svg";
import {useSetAvatar} from './components/useSetAvatar.js'


export default {
  components: {},
  setup(props) {
    const { proxy } = getCurrentInstance();
    const vueState = inject("vueState");
    const {setAvatar,state:avatarState} = useSetAvatar()
    const state = reactive({
      genderChecked: vueState.pageInfo.gender || 0,
      nickNameInput: vueState.pageInfo.nickName || "",
      radioGroup: ["Male", "Female"],
      clickId: "",
      offerId: "",
    });
    const InputModalData = reactive({
      show: false,
      showModal: () => {
        InputModalData.show = true;
        window.trackEvent({ pageTitle: "profilePage", ev: "clickNickname" });
      },
    });
    const clickButton = debounce(() => {
      window.trackEvent({
        pageTitle: "profilePage",
        ev: "clickUpdateButton",
        remarks: `${state.nickNameInput},${vueState.pageInfo.mobile},${state.genderChecked}`,
      });
      if (unactive.value) {
        Toast(proxy.$t("Please complete"));
      } else {
        updateInfo();
      }
    }, 500);
    const getTaskInfo = (res) => {
      const { offerId, clickId } = res.data;
      (state.offerId = offerId), (state.clickId = clickId);
      console.log("Profile", state);
    };
    const updateInfo = async () => {
      try {
        await UserApi.UserInfoUpdate({
          avatar_small: avatarState.uploadAvatar,
          avatar_large: avatarState.uploadAvatar,
          nickname: state.nickNameInput,
          gender: state.genderChecked,
          clickId: state.clickId,
          offerId: state.offerId,
        });
        vueState.getBaseInfo();
        window.SDKPostMessage({
          event: "h5_data_changed",
          data: {
            type: "user_info",
          },
        });
        Toast(proxy.$t("Success"));
        window.SDKPostMessage({
            event:'h5_open_page',
            data:{
                target:'reward_pop',
                data:{
                    from:'info',
                }
            }
        })
      } catch (e) {
        console.log(e);
      }
    };
    const bindMobile = () => {
      window.trackEvent({ pageTitle: "profilePage", ev: "clickPhoneLogin" });
      if (vueState.pageInfo.mobile) {
        return;
      } else {
        window.SDKPostMessage({
          event: "h5_open_page",
          data: {
            target: "bind_mobile",
            data: {
              page: "",
              showEvent: "showwithdrawbind",
              clickEvent: "clickwithdrawbind",
            },
          },
        });
      }
    };
    const imgOnError = (e) => {
      console.log(e);
      const img = e.srcElement;
      img.src = errorImg;
      img.onerror = null;
    };
    const clickNickname = () => {
      window.trackEvent({ pageTitle: "profilePage", ev: "clickNickname" });
    };
    const clickGender = (index) => {
      window.trackEvent({ pageTitle: "profilePage", ev: "clickGender" });
      state.genderChecked = index;
    };
    const unactive = computed(() => {
      if (state.nickNameInput && state.genderChecked) {
        return false;
      } else {
        return true;
      }
    });
    watch(
      () => vueState.pageStatus.infoAvailable,
      (newVal) => {
        if (newVal) {
          state.nickNameInput = vueState.pageInfo.nickName
          state.genderChecked = vueState.pageInfo.gender
          avatarState.avatar = vueState.pageInfo.avatar
          avatarState.uploadAvatar = vueState.pageInfo.serverAvatar
        }
      }
    );

    onMounted(() => {
      window.trackEvent({ pageTitle: "profilePage", ev: "showProfile" });
      // window.AdSDK.addEventListener('ad_callback_h5',vueState.getBaseInfo)
      window.AdSDK.addEventListener("ow_ad_task_h5", getTaskInfo);
      window.SDKPostMessage({
        event: "ow_h5_task_ad",
        data: {
          task: "Profile",
        },
      });
    });

    onUnmounted(() => {
      // window.AdSDK.removeEventListener('ad_callback_h5',vueState.getBaseInfo)
      window.AdSDK.removeEventListener("ow_ad_task_h5", getTaskInfo);
    });
    return {
      ...toRefs(state),
      clickButton,
      vueState,
      bindMobile,
      unactive,
      InputModalData,
      imgOnError,
      clickGender,
      clickNickname,
      avatarState,
      setAvatar
    };
  },
};
</script>
<style lang="less" scoped>
.wrapper {
  height: 100%;
  background-color: white;
  .container {
    height: 100%;
    padding: 0.4rem 0.16rem 0.32rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .avatar {
      position: relative;
      margin: 0 auto;
      height: 0.8rem;
      width: 0.8rem;
      border-radius: 50%;
      border: 0.03rem solid white;
      box-shadow: 0 0.17rem 0.34rem 0 rgba(10, 36, 99, 0.02),
        0 0.04rem 0.12rem 0 rgba(10, 36, 99, 0.08);
      .camera {
        position: absolute;
        left: 37%;
        top: 85%;
        height: 0.24rem;
        width: 0.24rem;
        background: url(../../../assets/images/camera_icon.svg) no-repeat center;
        background-size: contain;
        border-radius: 50%;
        box-shadow: 0 0.02rem 0.08rem 0 rgba(10, 36, 99, 0.12);
      }
      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .info {
      margin-top: 0.44rem;
      &-item {
        margin-top: 0.2rem;
        padding-bottom: 0.16rem;
        border-bottom: 0.01rem solid #ededef;
        &:first-child {
          margin-top: 0;
        }
        .title {
          font-size: 0.16rem;
          font-weight: 400;
          color: #121314;
          line-height: 0.28rem;
        }
        .select {
          display: flex;
          align-items: center;
          margin-top: 0.12rem;
          &-item {
            flex: 1;
            color: #9c9da6;
            margin-right: 0.2rem;
            height: 0.46rem;
            border: 0.01rem solid #e0e5f2;
            border-radius: 0.11rem;
            display: flex;
            align-items: center;
            justify-content: center;
            &.Female {
              .gender {
                background: url(../../../assets/images/female_grey_icon.png)
                  no-repeat left center;
                background-size: 0.2rem 0.2rem;
              }
              &.active {
                border-color: black;
                color:black;
                background: url(../../../assets/images/select.svg) no-repeat
                  right bottom;
                background-size: 0.26rem 0.24rem;
                .gender {
                  background: url(../../../assets/images/female_active_icon.svg)
                    no-repeat left center;
                  background-size: 0.2rem 0.2rem;
                }
              }
            }
            &.Male {
              .gender {
                background: url(../../../assets/images/male_grey_icon.png)
                  no-repeat left center;
                background-size: 0.2rem 0.2rem;
              }
              &.active {
                border-color: black;
                color: black;
                background: url(../../../assets/images/select.svg) no-repeat
                  right bottom;
                background-size: 0.26rem 0.24rem;
                .gender {
                  background: url(../../../assets/images/male_active_icon.svg)
                    no-repeat left center;
                  background-size: 0.2rem 0.2rem;
                }
              }
            }
            .gender {
              font-size: 0.16rem;
              font-weight: 500;
              line-height: 0.2rem;
              padding-left: 0.24rem;
            }
            &:last-child {
              margin-right: 0;
            }
          }
        }
        .content {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .number {
            font-size: 0.14rem;
            font-weight: 500;
            color: #121314;
            line-height: 0.24rem;
          }
          .side-right {
            display: flex;
            align-items: center;
            input {
              font-size: 0.14rem;
              font-weight: 500;
              color: #121314;
              line-height: 0.24rem;
              border: none;
              outline: none;
              text-align: right;
              &::placeholder {
                color: #9c9da6;
              }
            }
            .nickname {
              font-size: 0.14rem;
              font-weight: 500;
              color: #121314;
              line-height: 0.24rem;
            }
            .holder {
              font-size: 0.14rem;
              font-weight: 500;
              color: #9c9da6;
              line-height: 0.24rem;
            }
            .login {
              font-weight: 500;
              font-size: 0.14rem;
              color: #F5B53F;
              line-height: 0.24rem;
            }
            .arrow {
              height: 0.24rem;
              width: 0.24rem;
              background: url(../../../assets/images/right_arrow.png) no-repeat
                center;
              background-size: contain;
            }
          }
        }
      }
    }
    .button {
      .unique-button();
      height: 0.46rem;
      font-size: 0.16rem;
      flex-shrink: 0;
      &.unactive {
        opacity: 0.5;
      }
    }
  }
}
</style>
